<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card class="operatingrecord">
            <template #header>
                <div class="serchbox">
                    <div class="left">
                        <div class="item">
                            操作类型：
                            <el-select v-model="queryData.operateType" class="serchs" placeholder="请选择操作类型">
                                <el-option label="全部" value="" />
                                <el-option label="新增" value="新增" />
                                <el-option label="编辑" value="编辑" />
                                <el-option label="删除" value="删除" />
                                <el-option label="审核" value="审核" />
                            </el-select>
                        </div>
                        <div class="item">
                            操作时间：
                            <el-date-picker
                                v-model="queryTime"
                                type="daterange"
                                range-separator="—"
                                start-placeholder="请选择开始日期"
                                end-placeholder="请选择结束日期"
                                class="dateserch"
                                format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD"
                                :clearable="false"
                            />
                        </div>
                        <sxnfbtn @click="search">搜索</sxnfbtn>
                    </div>
                    <sxnfbtn @click="replacement">重置</sxnfbtn>
                </div>
            </template>
            <el-table :data="pageData.list" style="width: 100%" border>
                <el-table-column prop="operator" label="操作人" width="300"></el-table-column>
                <el-table-column prop="operateType" label="操作类型" width="300"></el-table-column>
                <!-- <el-table-column prop="operator" label="操作"></el-table-column>
                <el-table-column prop="operator" label="操作前"></el-table-column>
                <el-table-column prop="operator" label="操作后"> </el-table-column> -->
                <el-table-column prop="content" label="操作内容"> </el-table-column>
                <el-table-column prop="operateTime" label="操作时间" width="180"> </el-table-column>
            </el-table>
            <pagination :totalNum="pageData.total" @paginaClick="paginaClick"></pagination>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { operatingRecord } from "@/api/team";
import { useStore } from "vuex";
const store = useStore();
const queryData = reactive({
    pageNum: 1,
    pageSize: 10,
    content: "",
    startTime: "",
    endTime: "",
    operateType: "",
    teamId: store.getters.mainTeamId,
});
const queryTime = ref([]);
const pageData: any = reactive({
    list: [],
    total: 0,
});
const getPageData = () => {
    operatingRecord(queryData).then((res) => {
        pageData.list = res.data.list;
        pageData.total = res.data.total;

        console.log(pageData);
    });
};
getPageData();
const search = () => {
    if (queryTime.value.length > 0) {
        queryData.startTime = queryTime.value[0];
        queryData.endTime = queryTime.value[1];
    }

    queryData.pageNum = 1;
    getPageData();
};
// 分页
const paginaClick = (val: number) => {
    queryData.pageNum = val;
    getPageData();
};
// 重置
const replacement = () => {
    queryData.startTime = "";
    queryData.endTime = "";
    queryData.operateType = "";
    queryData.pageNum = 1;
    getPageData();
};
</script>
<style scoped lang="scss">
.operatingrecord {
    .serchbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .item {
                margin-right: 20px;
                color: #333333;
                font-size: 14px;
                .serchs {
                    width: 200px;
                }
            }
        }
    }
}
</style>
